<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="./jQuery.js"></script>
<!-- <script src="ongradeanimationCtrl.js" type="text/javascript"></script> -->
<style type="text/css">
*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
#wrapper{
    margin:0px auto;
    border:0px;
    padding:0px;
}
#show-area{
    width:800px;
    height:450px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
#show-area ul{
    position:relative;
    width:4800px;
    height:450px;
    right:0;
}
#show-area ul li{
    float:left;
    width:800px;
}
#controler{
    width:120px;
    text-align:center;
    position:absolute;
    top:425px;
    left:370px;
    z-index:1;
}
#controler div{
    height:15px;
    width:15px;
    border-radius:100%;
    background-color:#ccc;
    float:left;
    margin-left:5%;
    opacity:0.9;/*透明度50%*/
    filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
}
#button-left{
    /*display:none;*/
    color:#fff;
    position: absolute;
    top: 189px;
    left: 0px;
    width: 60px;
    height: 60px;
    z-index:2;
    background:url(./yaoshi_left.png);
    border-radius:100%;
    background-size:cover;
    opacity:0.5;/*透明度50%*/
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
#button-right{
    /*display:none;*/
    color:#fff;
    position: absolute;
    top: 189px;
    left: 740px;
    width: 60px;
    height: 60px;
    z-index:2;
    background:url(./yaoshi_right.png);
    border-radius:100%;
    background-size:cover;
    opacity:0.5;/*透明度50%*/
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
.onclick{
    background-color:#FFF !important;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="show-area">
  
     <ul>
     
        <li class="sol_1">
            <div class="sol_left">
                <img src="./yaoshi_1.png">
            </div>
            <div class="sol_right">
                <p>
                    <img src="./yaoshi_1a.png">
                </p>
                <br>
                <h2>全国执业药师资格考试用书</h2>
                <dd>
                    <a>注册试听免费课程</a>
                </dd>
                <dt>
                    <a>电子教案下载</a>
                    <a>在线购买</a>
                    <a>讲义下载</a>
                </dt>
            </div>
        </li>
        <li class="sol_2">
            <div class="sol_left">
                <img src="./yaoshi_2.png">
            </div>
            <div class="sol_right">
                <p>
                    <img src="./yaoshi_2a.png">
                </p>
                <br>
                <h2>全国执业药师资格考试用书</h2>
                <dd>
                    <a>注册试听免费课程</a>
                </dd>
                <dt>
                    <a class="dt_a1">电子教案下载</a>
                    <a class="dt_a2">在线购买</a>
                    <a class="dt_a3">讲义下载</a>
                </dt>
            </div>
        </li>
        <li class="sol_3">
            <div class="sol_left">
                <img src="./yaoshi_3.png">
            </div>
            <div class="sol_right">
                <p>
                    <img src="./yaoshi_3a.png">
                </p>
                <br>
                <h2>全国执业药师资格考试用书</h2>
                <dd>
                    <a>注册试听免费课程</a>
                </dd>
                <dt>
                    <a>电子教案下载</a>
                    <a>在线购买</a>
                    <a>讲义下载</a>
                </dt>
            </div>
        </li>
        <li class="sol_4">
            <div class="sol_left">
                <img src="./yaoshi_4.png">
            </div>
            <div class="sol_right">
                <p>
                    <img src="./yaoshi_4a.png">
                </p>
                <br>
                <h2>全国执业药师资格考试用书</h2>
                <dd>
                    <a>注册试听免费课程</a>
                </dd>
                <dt>
                    <a>电子教案下载</a>
                    <a>在线购买</a>
                    <a>讲义下载</a>
                </dt>
            </div>
        </li>
       
     </ul>
     
      <div id="button-left" title="下一张"></div>
      <div id="button-right" title="上一张"></div>
      
    <div id="controler"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
  </div>
</div>
<script type="text/javascript">
    $(function(){
   var i = 0;
   var imgWidth = $("#show-area ul li").width();
   
   var clone = $("#show-area ul li").first().clone();
   $("#show-area ul").append(clone);
   //复制第一张图片并且添加到最后达到无缝连接的效果
   
   var size = $("#show-area ul li").size();//得到所有li的个数
   
   
   /*第一步*/
   //一开始循环添加按钮
//    for(var j = 0 ; j<size - 1 ; j++){
//      $("#controler").append("<div></div>");   
       
//    }
   //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
  //所以添加按钮的时候我们也应该添加4个按钮
//    $("#controler div").eq(0).addClass("onclick");
   
   
   
   
   /*第二步*/
   //左按钮
   $("#button-left").click(function(){
      Toleft();
      
   })
   
   
   //右按钮
   $("#button-right").click(function(){
      Toright();
      
   })
   
  
  
  
  
  
   /*第3步*/
   //按钮移出移入事件
//    $("#controler div").hover(function(){
//     i = $(this).index();  
//     clearInterval(timer);
//     $("#show-area ul").stop().animate({left:-i * imgWidth});
//     $(this).addClass("onclick").siblings().removeClass("onclick");
//     $("#index").html("index的值：" + index);
    
    
    
//    },function(){
//      timer = setInterval(function(){
//      Toleft();    
       
//    },3000)    
        
//    })      
   
   
   //ul鼠标移出移入事件
   $("#show-area ul").hover(function(){
     clearInterval(timer);
     
   },function(){
      timer = setInterval(function(){
     Toleft();    
       
   },3000)     
       
   })
   
   //两个方向按钮鼠标移出移入事件
   $("#button-left,#button-right").mouseover(function(){
       clearInterval(timer);
       
   }).mouseout(function(){
     timer = setInterval(function(){
        Toleft();    
       
     },3000)    
   })
   

   //定时器
   var timer = setInterval(function(){
     Toleft();    
       
   },3000)   
   
   
   
   
   /*第2.1步*/
   //左按钮实现的函数
   function Toleft(){
       
     i++;
     if(i==size){
        //当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）
        $("#show-area ul").css({left:0});
        i = 1;     
     }
     $("#show-area ul").stop().animate({left:-i*imgWidth},1000);
     
     if(i == size -1){
        $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick"); 
           
     }else{
       $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");      
           
    }
       
     
     
     
   }
   
   
   /*第2.2步*/
   //右按钮实现的函数
   function Toright(){
       
       //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
      i--;
      if(i==-1){
         $("#show-area ul").css({left:-(size - 1)*imgWidth});
         i=size-2;    
          
      }   
      $("#show-area ul").animate({left:-i*imgWidth},1000);  
      $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); 
       
   }
   
   
   
});

</script>
</body>

</html>